﻿@page "/components/avatar"

<DocsPage>
    <DocsPageHeader Title="Avatar" SubTitle="The component is typically used to display circular user profile pictures, Icons or text." />
    <DocsPageContent>
        <DocsPageSection>
            <SectionHeader>
                <Title>Letter avatars</Title>
                <Description></Description>
            </SectionHeader>
            <SectionContent Outlined="true" DisplayFlex="true">
                <AvatarLetterExample />
            </SectionContent>
            <SectionSource Code="AvatarLetterExample" GitHubFolderName="Avatar"  />
        </DocsPageSection>
        <DocsPageSection>
            <SectionHeader>
                <Title>Icon avatars</Title>
                <Description>To create a Icon avatar just add an icon as childen.</Description>
            </SectionHeader>
            <SectionContent Outlined="true" DisplayFlex="true">
                <AvatarIconExample />
            </SectionContent>
            <SectionSource Code="AvatarIconExample" GitHubFolderName="Avatar"  />
        </DocsPageSection>
        <DocsPageSection>
            <SectionHeader>
                <Title>Image avatars</Title>
                <Description>Specify a link to image with the <CodeInline>Image</CodeInline> prop to show it in the avatar.</Description>
            </SectionHeader>
            <SectionContent Outlined="true" DisplayFlex="true">
                <AvatarImageExample />
            </SectionContent>
            <SectionSource Code="AvatarImageExample" GitHubFolderName="Avatar"  />
        </DocsPageSection>
        <DocsPageSection>
            <SectionHeader>
                <Title>Sizes</Title>
                <Description>You can change the size with the pre defined <CodeInline>Size</CodeInline> prop or change the <CodeInline>Width</CodeInline> and <CodeInline>Height</CodeInline> in css.</Description>
            </SectionHeader>
            <SectionContent Outlined="true">
                <AvatarSizeExample />
            </SectionContent>
            <SectionSource Code="AvatarSizeExample" GitHubFolderName="Avatar"  />
        </DocsPageSection>
        <DocsPageSection>
            <SectionHeader>
                <Title>Variants</Title>
                <Description>With the <CodeInline>Rounded</CodeInline> and <CodeInline>Square</CodeInline> prop you can change the border radius.</Description>
            </SectionHeader>
            <SectionContent Outlined="true" DisplayFlex="true">
                <AvatarVariantsExample />
            </SectionContent>
            <SectionSource Code="AvatarVariantsExample" GitHubFolderName="Avatar"  />
        </DocsPageSection>
    </DocsPageContent>
</DocsPage>